import React, { useEffect } from 'react'
import { NavBar } from 'antd-mobile'
import CommentFooter from '../CommentFooter'
import NoComment from '../NoComment'
import styles from './index.module.scss'
import { CommentDetail } from '@/types/data'
import CommentItem from '../CommentItem'
import { useDispatch } from 'react-redux'
import { getReplyList } from '@/store/actions/articleDetail'
type Props = {
  hideReply: () => void
  origin: CommentDetail
}
export default function CommentReply ({ origin, hideReply }: Props) {
  const dispatch = useDispatch()
  useEffect(
    () => {
      dispatch(getReplyList(origin.com_id, ''))
    },
    [dispatch]
  )
  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        {/* 顶部导航栏 */}
        <NavBar onBack={() => hideReply()} className="transparent-navbar">
          <div>{origin.reply_count}条回复</div>
        </NavBar>

        {/* 原评论信息 */}
        <div className="origin-comment">
          <CommentItem
            comment={origin}
            type="reply"
            onReply={function (comment: CommentDetail): void {
              throw new Error('Function not implemented.')
            }}
          />
        </div>

        {/* 回复评论的列表 */}
        <div className="reply-list">
          <div className="reply-header">全部回复</div>

          <NoComment />
        </div>

        {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
        <CommentFooter type="reply" />
      </div>
    </div>
  )
}
